<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>玛瑞莎业务系统登陆</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
  <link rel="stylesheet" href="__CSS__/bootstrapValidator.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="__CSS__/font-awesome.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="__CSS__/ionicons.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="__CSS__/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="__CSS__/blue.css">
  <style type="text/css">
    html,body{
      height: auto;
    }
    .form-code{
      width: 65%;
      display: inline-block;
    }
    .msgs{
      display:inline-block;
      width:32%;
      color:#fff;
      font-size:12px;
      border:1px solid #367fa9;
      text-align:center;height:34px;
      line-height:34px;
      background:#367fa9;
      cursor:pointer;
      float: right;
      border-radius: 5px;
    }
  </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href=""><b>玛瑞莎</b>业务系统</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">系统登陆界面</p>
    <form action="{:url('admin/Login/VerifLogin')}" method="post" id="form">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="请输入手机或者昵称" name="username">
        <span class="glyphicon form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control form-code" placeholder="验证码" name="code">
        <span class="msgs">获取微信验证码</span>
        <span class="glyphicon form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-lg-offset-0 col-xs-12">
          <button type="submit" class="btn btn-primary btn-block btn-flat" id="submit">登陆</button>
        </div>
      </div>
    </form>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 2.2.3 -->
<script src="__JS__/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="__JS__/bootstrap.min.js"></script>
<script src="__JS__/bootstrapValidator.min.js"></script>
<!-- iCheck -->
<script src="__JS__/icheck.min.js"></script>
<script src="__STATIC__/layer/layer.js"></script>
<script src="__JS__/language/zh_CN.js"></script>
<script>

  $(function () {

      //获取短信验证码
      var validCode=true;
      $(".msgs").click (function  () {
          var time=30;
          var code=$(this);
          var a=  checkadminForms();
          if (validCode && a) {
              validCode=false;
              var admin_username = $.trim($('input[name="username"]').val()); //获取INPUT值
              var b= sendwechat(admin_username);
              if(b){
                  code.addClass("msgs1");
                  var t=setInterval(function  () {
                      time--;
                      code.html(time+"秒");
                      if (time==0) {
                          clearInterval(t);
                          code.html("重新获取");
                          validCode=true;
                          code.removeClass("msgs1");
                      }
                  },1000)
              }
          }
      });

      var checkadminForms=function checkadminForms() {
          var admin_username = $.trim($('input[name="username"]').val()); //获取INPUT值
          if(admin_username==''){
              layer.alert('用户名不能为空', {icon: 5}, function (index) {
                  layer.close(index);
              });
              return false;
          }
          return true;
      }

      var sendwechat = function (data) {
          var v;
          $.ajax({
              type: "get",
              async:false,
              url:  "/admin/login/sendYanzheng/username/"+data+".html",
              success: function(info){
                  console.log(info);

                  if(info.code==1){
                      layer.msg(info.msg, {icon: 1});
                      v = true;
                  }else{
                      layer.msg(info.msg, {icon: 5});
                      v = false
                  }
              }
          });
          return v;
      }


        $('input').iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
      $('#form').bootstrapValidator({
          message: 'This value is not valid',
          feedbackIcons: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
              username: {
                  message: '用户名验证失败',
                  validators: {
                      notEmpty: {
                          message: '用户名不能为空'
                      }
                  }
              },
              code: {
                  validators: {
                      notEmpty: {
                          message: '验证码不能为空'
                      }
                  }
              }
          }
      });
      $(document).keyup(function(event){
          if(event.keyCode ==13){
              $("#submit").trigger("click");
          }
      });
      $("#form").submit(function(ev){ev.preventDefault();});
      $("#submit").on("click", function(){
          var bootstrapValidator = $("#form").data('bootstrapValidator');
          bootstrapValidator.validate();
          if(bootstrapValidator.isValid()){
              $.ajax({
                  type: "POST",
                  url:  "{:url('VerifLogin')}",
                  data: $('#form').serialize(),
                  beforeSend:function(){
                      $(this).attr("disabled","false"); //禁止点击
                  },
                  success: function(info){
                      console.log(info);
                      if(info.code==1){
                          layer.msg(info.msg, {icon: 1});
                          setTimeout(function(){
                              location.href=info.url;
                          },1000); //延迟演示
                      }else{
                          if(info.msg == '请绑定微信公众号之后在登陆系统！'){
                              layer.open({
                                  type: 1,
                                  title: false,
                                  area: ['300px', '300px'],
                                  shadeClose: true, //点击遮罩关闭
                                  content: "<div><img src='/static/images/qrcode_for_gh_e8badd248bde_258.jpg'></div><br/>请绑定微信公众号之后在登陆系统！"
                              });
                          }
                          layer.msg(info.msg, {icon: 5});
                          $('#submit').removeAttr("disabled"); //禁止点击
                      }

                  }
              });
          return false;
          }else return;
      });
  });

</script>
</body>
</html>
